Questions
4 of 8
1 What are semantic elements and why do they matter?
2 List all semantic tags and when were they introduced ?
3List all semantic tags and when were they introduced?
4Difference between <div> and <section>?
5What is the use of <nav>?
6What is the purpose of <article> ?
7What is a semantic element?
8Name 3 semantic tags introduced in HTML5?
HTMLHTML
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
04 / 08

Difference between <div> and <section>?

Difference Between <div> and <section>

Both <div> and <section> are block-level elements used for grouping content, but they differ in meaning and purpose. <div> is a generic container with no semantic meaning, while <section> is a semantic container that represents a distinct section of content, usually with a heading.

Key Differences
  1. 1<div>: Generic container with no semantic meaning. Used mainly for styling or grouping content when no other semantic element is suitable.
  2. 2<section>: Semantic container introduced in HTML (later standard). Represents a thematic grouping of content, typically with its own heading.
  3. 3<div>: Often used for layout, applying CSS classes, or as a wrapper around other elements.
  4. 4<section>: Improves accessibility and SEO by indicating meaningful document structure.
  5. 5<div>: Neutral, so screen readers don’t announce any special role.
  6. 6<section>: Screen readers identify it as a 'region', especially if it has an accessible label (like a heading).
Example Usage

In short: Use <div> when you need a generic container for styling or scripting. Use <section> when the content forms a logical, standalone part of the document.